<!-- modules/VerticalMixMenu.vue - 垂直混合布局菜单 -->
<template>
    <!-- 🚀 主侧边栏传送 -->
    <Teleport v-if="primaryTeleportReady" to="#sider-menu-container-primary">
      <div class="vertical-mix-main">
        <el-menu
          mode="vertical"
          :default-active="activeFirstLevelMenuKey"
          :collapse="true"
          class="vilan-menu primary-menu"
          @select="handlePrimarySelect"
        >
          
          <!-- 🎯 静态一级菜单 -->
          <template v-if="!useDynamic">
            <el-menu-item index="dashboard">
              <el-icon><Odometer /></el-icon>
            </el-menu-item>
            
            <el-menu-item index="system">
              <el-icon><Setting /></el-icon>
            </el-menu-item>
            
            <el-menu-item index="user">
              <el-icon><Avatar /></el-icon>
            </el-menu-item>
          </template>
          
          <!-- 🎯 动态一级菜单 -->
          <template v-else>
            <el-menu-item
              v-for="item in firstLevelMenus"
              :key="item.key"
              :index="item.key"
            >
              <el-icon v-if="item.icon">
                <component :is="getMenuIcon(item.icon)" />
              </el-icon>
            </el-menu-item>
          </template>
          
        </el-menu>
      </div>
    </Teleport>
    
    <!-- 🚀 子侧边栏传送 -->
    <Teleport v-if="subTeleportReady" to="#sub-sider-menu-container">
      <div class="vertical-mix-sub" v-if="showSubMenu">
        <!-- 子菜单标题 -->
        <div class="sub-menu-header">
          <h3>{{ currentMenuTitle }}</h3>
        </div>
        
        <!-- 子菜单内容 -->
        <el-menu
          mode="vertical"
          :default-active="$route.path"
          :router="true"
          class="vilan-menu sub-menu"
        >
          
          <!-- 🎯 静态子菜单 -->
          <template v-if="!useDynamic">
            <template v-if="activeFirstLevelMenuKey === 'system'">
              <el-menu-item index="/system/user">
                <el-icon><User /></el-icon>
                <template #title>用户管理</template>
              </el-menu-item>
              <el-menu-item index="/system/role">
                <el-icon><UserFilled /></el-icon>
                <template #title>角色管理</template>
              </el-menu-item>
              <el-menu-item index="/system/menu">
                <el-icon><Menu /></el-icon>
                <template #title>菜单管理</template>
              </el-menu-item>
            </template>
            
            <template v-else-if="activeFirstLevelMenuKey === 'user'">
              <el-menu-item index="/user/profile">
                <el-icon><UserFilled /></el-icon>
                <template #title>个人资料</template>
              </el-menu-item>
              <el-menu-item index="/user/setting">
                <el-icon><Tools /></el-icon>
                <template #title>账户设置</template>
              </el-menu-item>
            </template>
          </template>
          
          <!-- 🎯 动态子菜单 -->
          <template v-else>
            <el-menu-item
              v-for="subItem in currentSubMenus"
              :key="subItem.key"
              :index="subItem.path"
            >
              <el-icon v-if="subItem.icon">
                <component :is="getMenuIcon(subItem.icon)" />
              </el-icon>
              <template #title>{{ subItem.label }}</template>
            </el-menu-item>
          </template>
          
        </el-menu>
      </div>
    </Teleport>
  </template>
  
  <script setup>
  import { computed, ref, onMounted, nextTick } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useLayoutManage } from '@/layouts/layoutManage.js'
  import {
    Odometer,
    Setting,
    Avatar,
    User,
    UserFilled,
    Menu,
    Tools,
    InfoFilled,
    Document,
    DataBoard,
    EditPen
  } from '@element-plus/icons-vue'
  
  const props = defineProps({
    useDynamic: Boolean,
    menuData: Array,
    config: Object
  })
  
  const route = useRoute()
  const router = useRouter()
  
  // 🎯 混合菜单管理
  const {
    activeFirstLevelMenuKey,
    setActiveFirstLevelMenuKey,
    firstLevelMenus,
    childLevelMenus
  } = useLayoutManage()
  
  // 🎯 Teleport 就绪状态
  const primaryTeleportReady = ref(false)
  const subTeleportReady = ref(false)
  
  // 等待容器就绪
  onMounted(async () => {
    console.log('🚀 [VerticalMixMenu] 组件已挂载')
    
    await nextTick()
    
    // 检查主侧边栏容器
    const primaryContainer = document.getElementById('sider-menu-container-primary')
    if (primaryContainer) {
      primaryTeleportReady.value = true
      console.log('✅ [VerticalMixMenu] 主侧边栏容器就绪')
    }
    
    // 检查子侧边栏容器
    const subContainer = document.getElementById('sub-sider-menu-container')
    if (subContainer) {
      subTeleportReady.value = true
      console.log('✅ [VerticalMixMenu] 子侧边栏容器就绪')
    }
  })
  
  // 🎯 计算属性
  
  // 是否显示子菜单（基于实际子菜单数量）
  const showSubMenu = computed(() => {
    const hasChildren = childLevelMenus.value && childLevelMenus.value.length > 0
    console.log('🔍 [VerticalMixMenu] showSubMenu 计算:', 
      'hasChildren:', hasChildren,
      'childCount:', childLevelMenus.value?.length || 0,
      'activeKey:', activeFirstLevelMenuKey.value,
      'childMenus:', childLevelMenus.value
    )
    return hasChildren
  })
  
  // 当前子菜单数据
  const currentSubMenus = computed(() => {
    return props.useDynamic ? childLevelMenus.value : []
  })
  
  // 当前菜单标题
  const currentMenuTitle = computed(() => {
    const titleMap = {
      'system': '系统管理',
      'user': '用户中心'
    }
    return titleMap[activeFirstLevelMenuKey.value] || ''
  })
  
  // 🎯 事件处理
  
  // 处理一级菜单选择
  function handlePrimarySelect(index) {
    console.log('🎯 [VerticalMixMenu] 一级菜单点击:', index)
    console.log('📊 [VerticalMixMenu] 点击前状态:', {
      oldActiveKey: activeFirstLevelMenuKey.value,
      oldChildMenus: childLevelMenus.value
    })
    
    setActiveFirstLevelMenuKey(index)
    
    console.log('📊 [VerticalMixMenu] 点击后状态:', {
      newActiveKey: activeFirstLevelMenuKey.value,
      newChildMenus: childLevelMenus.value
    })
    
    // 如果是仪表板，直接跳转
    if (index === 'dashboard') {
      router.push('/dashboard')
    }
  }
  
  // 图标映射
  function getMenuIcon(iconName) {
    // 🎯 图标映射表（兼容小写和大写）
    const iconMap = {
      'dashboard': Odometer,
      'system': Setting,
      'user': Avatar,
      'role': UserFilled,
      'menu': Menu,
      'tools': Tools,
      'document': Document,
      'Odometer': Odometer,
      'Setting': Setting,
      'Avatar': Avatar,
      'User': User,
      'UserFilled': UserFilled,
      'Menu': Menu,
      'Tools': Tools,
      'InfoFilled': InfoFilled,
      'Document': Document,
      'DataBoard': DataBoard,
      'EditPen': EditPen
    }
    return iconMap[iconName] || Menu
  }
  </script>
  
  <style lang="scss" scoped>
  // 🎯 主侧边栏（80px，一级菜单）
  .vertical-mix-main {
    width: 80px;
    height: 100%;
    border-right: 1px solid var(--el-border-color-light);
    
    .primary-menu {
      border: none;
      background: transparent;
      
      .el-menu-item {
        height: 56px;
        margin: 8px 12px;
        padding: 0 !important;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        .el-icon {
          font-size: 22px;
          margin-right: 0;
          transition: all 0.3s;
        }
        
        &:hover {
          background: rgba(100, 108, 255, 0.08);
          transform: scale(1.05);
        }
        
        &.is-active {
          background: var(--el-color-primary);
          color: #ffffff;
          position: relative;
          
          .el-icon {
            color: #ffffff;
          }
          
          // 左侧激活指示条
          &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 28px;
            background: #ffffff;
            border-radius: 0 2px 2px 0;
          }
        }
      }
    }
  }
  
  // 🎯 子侧边栏（200px，二级菜单）
  .vertical-mix-sub {
    width: 200px;
    height: 100%;
    background: #fafafa;  // 🎨 简约浅灰色背景
    border-right: 1px solid #e8e8e8;  // 更柔和的边框
    
    .sub-menu-header {
      height: 56px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      border-bottom: 1px solid #e8e8e8;  // 更柔和的边框
      background: #ffffff;  // 白色头部，与浅灰背景形成对比
      
      h3 {
        font-size: 14px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0;
      }
    }
    
    .sub-menu {
      border: none;
      background: transparent;
      padding: 8px 0;
      
      .el-menu-item {
        border-radius: 8px;  // 更圆润的圆角
        margin: 4px 12px;  // 更大的边距
        
        &:hover {
          background: #ffffff;  // 悬停时白色背景
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);  // 轻微阴影
        }
        
        &.is-active {
          background: var(--el-color-primary);  // 激活时主题色背景
          color: #ffffff;  // 白色文字
          font-weight: 500;
        }
      }
    }
  }
  </style>